// 路由组件的三种渲染方式

import React, { Component } from 'react';
import { NavLink, Route, withRouter, Switch, Redirect } from 'react-router-dom'
import Home from '../views/router-view/Home';
import Category from '../views/router-view/Category';
import Cat from '../views/router-view/Cat';
import Mine from '../views/router-view/Mine';
import Notfind from '../views/router-view/Notfind';

// 导入自定义的导航组件 MyNav 组件
import MyNav from '../components/MyNav';

class Index1 extends Component {
    render() {
        return (
            <div>
                {/* <NavLink to='/home'>首页</NavLink>
                <NavLink to='/category'>分类</NavLink>
                <NavLink to='/cat'>购物车</NavLink>
                <NavLink to='/mine'>我的页</NavLink> */}
                <MyNav to='/home' tag='p'>首页</MyNav>
                <MyNav to='/category' tag='p'>分类</MyNav>
                <MyNav to='/cat'>购物车</MyNav>
                <Switch>
                    <Route path='/home' component={Home} ></Route>
                    <Route path='/category/:id?' component={Category} ></Route>
                    <Route path='/cat' component={Cat} ></Route>
                    <Route path='/mine' component={Mine} ></Route>
                    <Redirect from='/' to='/home' exact></Redirect>
                </Switch>
            </div>
        );
    }
}

export default withRouter(Index1);
